<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="./masterpage/masterpage.xhtml">

	<ui:define name="content">
		<div id="customerInfo">
			<div class="title">
				<h2>Customer Detail</h2>
			</div>
			<hr />
			<table>
				<tr>
					<th class="boldClass">Customer ID</th>
					<td><h:outputText value="#{customerManageBean.cus.customerID}" />
					</td>
				</tr>
				<tr>
					<th class="boldClass">ID Card Number</th>
					<td><h:outputText
							value="******#{customerManageBean.cus.idCardNumber mod 10000}" /></td>
				</tr>
				<tr>
					<th class="boldClass">First Name</th>
					<td><h:outputText value="#{customerManageBean.cus.firstName}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Last Name</th>
					<td><h:outputText value="#{customerManageBean.cus.lastName}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Mid Name</th>
					<td><h:outputText value="#{customerManageBean.cus.midName}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Address 1</th>
					<td><h:outputText value="#{customerManageBean.cus.address}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Address 2</th>
					<td><h:outputText value="#{customerManageBean.cus.address2}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Phone Number 1</th>
					<td><h:outputText
							value="******#{customerManageBean.cus.phoneNumber}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Phone Number 2</th>
					<td><h:outputText
							value="******#{customerManageBean.cus.phoneNumber2}" /></td>
				</tr>
				<tr>
					<th class="boldClass">Create Date</th>
					<td><h:outputText
							value="#{customerManageBean.cus.createdDate}" /></td>
				</tr>

			</table>

		</div>
		<div id="accountInfo">
			<div class="title">
				<h2>Account Detail</h2>
			</div>
			<hr />
			<div style="width: 350px; float: left; margin-left: 60px">
				<ui:repeat var="s" value="#{customerManageBean.sav}">
					<table>
						<tr>
							<th colspan="2">Saving account</th>
						</tr>
						<tr>
							<td class="boldClass">Account Number</td>
							<td><h:outputText value="#{s.accountNumber}"  /></td>
						</tr>
						<tr>
							<td class="boldClass">Balance</td>
							<td>
								<h:outputText value="#{s.accountBalance}">
									<f:convertNumber currencySymbol="" groupingUsed="true"
                    			 maxFractionDigits="0" type="currency" />
								</h:outputText> VND
							</td>
						</tr>
					</table>
					<div id="separate"></div>
				</ui:repeat>
			</div>

			<div style="width: 350px; float: right; margin-right: 40px">
				<ui:repeat var="s" value="#{customerManageBean.dep}">
					<table>
						<tr>
							<th colspan="2">Deposit account</th>
						</tr>
						<tr>
							<td>Account Number</td>
							<td><h:outputText value="#{s.accountNumber}" /></td>
						</tr>
						<tr>
							<td class="boldClass">Balance</td>
							<td>
								<h:outputText value="#{s.accountBalance}">
									<f:convertNumber currencySymbol="" groupingUsed="true"
                    			 maxFractionDigits="0" type="currency" />
								</h:outputText> VND
							</td>
						</tr>
						<tr>
							<td>
							<h:form name="sendDepIDForm" method="post">
								<h:commandButton value="View transactions" 
								action="#{customerManageBean.showDepositAccountTransaction(s.accountNumber)}">
								</h:commandButton>
								</h:form>
							</td>
						</tr>
					</table>
					<div id="separate"></div>
				</ui:repeat>
			</div>
		</div>
	</ui:define>

</ui:composition>
</html>